<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2020/5/17
  Time: 8:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="true" %>
<html>
<head>
    <title>采购申请</title>
    <%@include file="/comm/head.jsp"%>
</head>
<body>
<div id="root">

    <modal v-model="addFlag" title="添加订单"<%-- @on-ok="add2"--%>>

        <i-form :label-width="80" style="padding: 30px" inline>
            <form-item label="供应商:">
                <i-select v-model="orderdetail.providerId" @on-change="aa" style="width: 110px">
                    <i-Option v-for="item in providerList" :value="item.id" :key="item.id">{{item.proName}}</i-Option>
                </i-select>
            </form-item>
            <card>
                <i-button type="success" @click="zeng">增加</i-button>
            </card>
            <i-table :columns="column" :data="data"  :height="300"  border stripe>

            </i-table>
        </i-form>
    </modal>
    <modal v-model="zengFlag" title="增加" @on-ok="add1">
        <i-form :label-width="80" style="padding: 30px" inline>
            <form-item label="商品编号:" :width="10">
                <%--    <i-input type="text" v-model="orderdetail.goodName" style="width: 110px">{{ orderdetail.goodsId }}</i-input>--%>
                <i-input type="text" v-model="orderdetail.goodsId" :value="shen.id"/>
            </form-item>
            <form-item label="商品名称:">
                <i-select v-model="orderdetail.goodName" @on-change="bb" style="width: 110px">
                    <i-Option v-for="item in goodList":value="item.name" :key="item.id">{{item.name}}</i-Option>
                </i-select>
            </form-item>
            <form-item label="价格:">
                <i-input type="text" v-model="orderdetail.price" :value="shen.purchasePrice"/>
            </form-item>
            <form-item label="数量:">
                <%--<input-number v-model="orderdetail.number"></input-number>--%>
                <i-input type="text" v-model="orderdetail.number" @on-blur="cc"/>
            </form-item>
            <form-item label="总金额:">
                <%--<input-number v-model="orderdetail.number"></input-number>--%>
                <i-input type="text" v-model="orderdetail.money" :value="jiner" />
            </form-item>

            <form-item label="库存名称:">
                <i-select v-model="orderdetail.storeId"style="width: 110px">
                    <i-Option v-for="item in storeList" v-bind:value="item.id" :key="item.id">{{item.sname}}</i-Option>
                </i-select>
            </form-item>
          <%--  <form-item label="采购编号:">
                <i-select v-model="orderdetail.orderId"style="width: 110px">
                    <i-Option v-for="item in orderList" :value="item.id" :key="item.id">{{item.id}}</i-Option>
                </i-select>
            </form-item>--%>
        </i-form>
    </modal>



    <Collapse value="search">
        <Panel name="search">
        </Panel>
    </Collapse>

    <card>
        <i-button type="success" @click="toCai">采购申请</i-button>
    </card>
    <i-table  :columns="columns" :data="pageResult.rows"  :height="400" border stripe>
        <template slot-scope="{row}" slot="proName">
            <span>{{row.provider.proName}}</span>
        </template>
        <template slot-scope="{row}" slot="state">
            <span>{{row.state==0?"未审核":"已审核"}}</span>
        </template>
        <template slot-scope="{row}" slot="username">
            <span>{{row.user.username}}</span>
        </template>
    </i-table>

    <Page :total="pageResult.total"
          :page-size="pageSize"
          @on-change="pageNo=arguments[0];search();"
          show-sizer
          :page-size-opts="[5,10,15]"
          @on-page-size-change="pageSize=arguments[0];search();"
    />
</div>
<script>
    new Vue({
        el:"#root",
        data:{
            columns:[
                {title:"编号",key: "id"},
                {title:"生成日期",key: "createTime"},
                {title:"审核日期",key: "checkTime"},
                {title:"采购日期",key:"purchaseTime"},
                {title:"下单员",slot:"username"},
                //{ title:"审核员",key:"username"},
                //{title:"采购员",slot:"username"},
                //{title:"库管员",key:"username"},
                {title:"供应商",slot:"proName"},
                {title:"总金额",key:"totalMoney"},
                {title:"订单状态",slot:"state"},
                // {title:"操作",slot:"action"}

            ],
            column:[
                {title:"商品编号",key: "goodsId"},
                {title:"商品名称",key: "goodName"},
                {title:"价格",key: "price"},
                {title:"数量",key:"number"},
                {title:"金额",key:"money"},
                // {title:"操作",slot:"state"},
            ],
            data:[],
            pageResult:{
                rows:[],
                total:50
            },
            order:{},
            pageNo:1,
            pageSize:5,
            providerList:[],
            goodList:[],
            addFlag:false,
            zengFlag:false,
            addFlag1:false,
            orderdetail:{},
            goods:{

            },
            store:{},
            storeList:[],
            orderList:[],
            shen:{},
            jiner:'',





        },
        methods:{
            search(){
                axios.get(`${ctx}/caiGou/sq/search/${this.pageNo}/${this.pageSize}`)
                    .then(({data})=>{
                        this.pageResult=data.result;
                    });
            },
            aa(){
                axios.get(`${ctx}/sys/goods/lists?providerId=${this.orderdetail.providerId}`)
                    .then(({data})=>{
                        this.goodList=data.result;
                        // console.log(this.goodList);
                    });

            },
            bb(){

                axios.get(`${ctx}/sys/goods/cha?name=${this.orderdetail.goodName}`)
                    .then(({data})=>{
                        this.shen=data.result;
                        // console.log(this.shen)
                        this.orderdetail.goodsId=this.shen.id;
                        this.orderdetail.price=this.shen.purchasePrice;
                        // console.log(this.orderdetail.goodsId)
                    })
            },
            cc(){
                this.jiner=this.orderdetail.number*this.orderdetail.price;
                this.orderdetail.money=this.jiner;
                // console.log( this.jiner);
            },
            searchProvider(){
                axios.get(`${ctx}/sys/provider/list`)
                    .then(({data})=>{
                        this.providerList=data.result;
                    });
            },
          /*  search2(){
                console.log("sss"+this.providerId);

            },*/
            search3(){
                axios.get(`${ctx}/sys/cangKu/list`)
                    .then(({data})=>{
                        this.storeList=data.result;
                    });
            },
            search4(){
                axios.get(`${ctx}/caiGou/sq/list1`)
                    .then(({data})=>{
                        this.orderList=data.result;
                    });
            },

            toCai(){
                this.order={};
                this.orderdetail={};
                this.addFlag=true;

            },
            zeng(){
                // this.orderdetail={};
                this.zengFlag=true;
            },
            add1(){
               /* console.log(this.order)
                axios.post(`${ctx}/caiGou/sq/add`,this.order)
                    .then(({data})=>{
                        this.addFlag=false;//关闭模态框
                        iview.Message.success({content:data.msg});
                        this.search();

                    });*/


                this.data.push(this.orderdetail);
                 // console.log(this.data);
              /*  axios.post(`${ctx}/caiGou/sq/add1`,this.orderdetail)
                    .then(({data})=>{
                        this.addFlag1=false;//关闭模态框
                        iview.Message.success({content:data.msg});
                        this.search();
                    });*/
            },


        },
        mounted(){
            this.search();
            this.searchProvider();
        /*    this.search2();*/
            this.search3();
            this.search4();

        },

    });
</script>
</body>
</html>
